<script setup>
import { ref, reactive, computed } from "vue";
const tagData = reactive([
  { name: "生活", id: 1, flag: false },
  { name: "游戏", id: 2, flag: false },
  { name: "娱乐", id: 3, flag: false },
  { name: "知识", id: 4, flag: false },
  { name: "影视", id: 5, flag: false },
  { name: "音乐", id: 6, flag: false },
  { name: "动画", id: 7, flag: false },
  { name: "时尚", id: 8, flag: false },
  { name: "美食", id: 9, flag: false },
  { name: "汽车", id: 10, flag: false },
  { name: "运动", id: 11, flag: false },
  { name: "科技", id: 12, flag: false },
  { name: "动物圈", id: 13, flag: false },
  { name: "舞蹈", id: 14, flag: false },
  { name: "国创", id: 15, flag: false },
  { name: "鬼畜", id: 16, flag: false },
  { name: "纪录片", id: 17, flag: false },
  { name: "番剧", id: 18, flag: false },
  { name: "电视剧", id: 19, flag: false },
  { name: "电影", id: 20, flag: false },
]);

const myTag = ref([]);
const tagClick = (v) => {
  if (myTag.value.length >= 10) return;
  v.flag = true;
  let r = myTag.value.filter((item) => item.id === v.id);
  if (r.length > 0) return;
  myTag.value.push(v);
};

const restMyTagComputed = computed(() => 10 - myTag.value.length);

const deleteMyTag = (v, i) => {
  v.flag = false;
  myTag.value.splice(i, 1);
};
let status = ref("hide");
</script>

<template>
  <div class="container">
    <div class="container">
      <p>推荐标签</p>
      <div class="panel panel-default">
        <!--标题-->
        <div class="panel-heading">
          <h3 class="panel-title">推荐标签({{ tagData.length }})</h3>
        </div>
        <!--内容-->
        <div class="panel-body panel-height">
          <ul>
            <li @click="tagClick(v)" :class="{ selected: v.flag }" v-for="(v, i) in tagData" :key="v.id">
              {{ v.name }}
            </li>
          </ul>
        </div>
      </div>
      <p>我的标签</p>
      <!--标题-->
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">我的标签({{ myTag.length }}) / 还可以选择{{ restMyTagComputed }}个标签</h3>
        </div>
        <!--内容-->
        <div class="panel-body panel-height panel-right">
          <ul>
            <li v-for="(v, i) in myTag" :key="v.id" @mouseover="status = i" @mouseleave="status = 'hide'">
              {{ v.name }}
              <span class="del" @click="deleteMyTag(v, i)" v-show="status === i"> × </span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
  box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
  border-color: #ddd;
}
.panel-default > .panel-heading {
  color: #333;
  background-color: #f5f5f5;
  border-color: #ddd;
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  color: inherit;
  font-weight: 500;
}
.panel-height {
  height: 310px;
  overflow-y: scroll;
}
.panel-height li {
  cursor: default;
  background: #f9f9f9;
  display: inline-block;
  border: 1px solid #d6e9c6;
  margin: 5px;
  padding: 5px 15px;
  position: relative;
}
.panel-height li:hover {
  border: 1px solid #ff709e;
}
.panel-height li span.del {
  position: absolute;
  color: #999;
  right: 3px;
  top: -3px;
}
.panel-height li span.del:hover {
  color: #ff709e;
}
.panel-height li.selected,
.panel-right li {
  color: #ff709e;
  background: #fff;
  border: 1px solid #ff709e;
  border-radius: 10px;
}
.panel-default .panel-title span {
  float: right;
}
</style>
